<template>
  <div>
    <el-tabs style="width: 90%; margin: 0 auto">
      <el-tab-pane label="贷后管理">
        <el-form :inline="true">
          <el-form-item>
            <el-input
              placeholder="登记机构"
              clearable
              @keyup.enter.native="getData()"
              v-model="params.submit_org_name"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-input
              placeholder="提交人"
              clearable
              @keyup.enter.native="getData()"
              v-model="params.submit_person_name"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-input
              placeholder="登记内容"
              clearable
              @keyup.enter.native="getData()"
              v-model="params.visit_des"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="getData()">查询</el-button>
          </el-form-item>
        </el-form>
        <c-table border v-loading="loading" :columns="tableColumns" :data="tableData"></c-table>

        <div class="query-pagination">
          <div></div>
          <el-pagination
            layout="total, prev, pager, next, jumper"
            :current-page.sync="params.index"
            :page-size="params.size"
            :total="totalCount"
            @current-change="getData"
          ></el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="贷后附件">
        <div v-if="attach.length < 1" class="p-5 text-center text-muted border rounded bg-light">
          没有附件
        </div>
        <ul class="list-inline" v-loading="loading">
          <li class="attach-item" v-for="(item, index) of attach" :key="index">
            <div class="img-wrap">
              <img class="attach-item-img" @click="handlePreview(index)" :src="item.image" />
            </div>
            <div class="text-center">{{ item.time || '-' }}</div>
          </li>
        </ul>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { arrayFromString } from '@vimi/utils-tool'

export default {
  props: {
    queryId: String,
  },
  computed: {
    images() {
      return this.attach.map(item => {
        return { src: item.image, title: item.time }
      })
    },
  },
  data() {
    return {
      order: {
        visit_date: 'DESC',
      },
      params: {
        index: 1,
        size: 10,
      },
      loading: false,
      tableName: 'credit_visit_record_view_new',
      totalCount: 0,
      tableData: [],
      tableColumns: [
        {
          attrs: { label: '登记时间', prop: 'visit_date', align: 'center' },
          process: v => this.$utils.dateFormat(v, 'yyyy-MM-dd'),
        },
        { attrs: { label: '登记机构', prop: 'submit_org_name', align: 'center' } },
        { attrs: { label: '提交人', prop: 'submit_person_name', align: 'center' } },
        { attrs: { label: '登记内容', prop: 'visit_des', align: 'center' } },
      ],
      attach: [],
    }
  },
  watch: {
    queryId() {
      this.getData()
      this.getAttach()
    },
  },
  created() {
    this.getData()
    this.getAttach()
  },
  methods: {
    async getData(index = 1) {
      if (!this.queryId) return
      this.params.index = index
      this.params['customer_related_id.eq'] = this.queryId
      this.loading = true
      const [res] = await this.$utils.promise(
        this.$api.getData(this.$serviceName, this.tableName, this.params, this.order)
      )
      this.loading = false

      const data = (res && res.data) || {}
      this.totalCount = data.totalCount || 0
      this.tableData = data.data || []
    },
    getAttach() {
      const params = {
        'customer_related_id.eq': this.queryId,
        'visit_images.isNot': 'null',
        'visit_images.neq': '',
      }
      this.$api
        .getData(this.$serviceName, this.tableName, params, this.order, {
          filterEmpty: ['visit_images.neq'],
        })
        .then(res => {
          const data = (res && res.data) || []
          data.forEach(item => {
            const images = arrayFromString(item.visit_images)
            const time = this.$utils.dateFormat(item.visit_date, 'yyyy.MM.dd')
            this.attach.push(
              ...images.map(image => {
                return { image, time }
              })
            )
          })
        })
    },
    handlePreview(index) {
      this.$utils.viewer({
        images: this.images,
        index,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.attach-item {
  display: inline-block;
  vertical-align: top;
  margin-right: 5px;
  margin-bottom: 5px;
}
.img-wrap {
  overflow: hidden;
  position: relative;
  width: 148px;
  height: 148px;
  border-radius: 4px;
  border: 1px solid #c0ccda;
  padding: 2px;

  &:hover {
    border-color: var(--primary);
  }

  .attach-item-img {
    width: 100%;
    height: 100%;
    border-radius: 2px;
    z-index: 1;
    cursor: pointer;
  }
}
</style>
